.chat {
    width: 100%;
}

.bubble{
	max-width: 60%;
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break:break-all;
}

.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.you {
    float: left;   
    margin: 5px 1px 5px 20px;         
}

.you::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.me {
    float: right;  
    margin: 5px 20px 5px 1px;   
}

.me::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;
       
}
.mychat-div{
    overflow: scroll;
    height: 300px;
}
.notice-div{
	float: right; 
	width: 100%;
	border-radius:5px;
	margin: 5px 0px 5px 0px;
	text-align: center;
	background-color: #5CB85C;
	color: #255625;
	font-size: large;
}
.image_you{
	float: left;
}
.image_me{
	float: right;
}
.eachline{
	float: right;
	width: 100%;
}
.onlineList{
	max-height: 350px;
	overflow: auto;
}
.onlineUser{
	width: 200px;
}
.profileForm{
	width: 60%;
	float: left;
}
.profilePic{
	width: 30%;
	float: right;
}
.header{
	background-color: #122B40;
	color: #CCCCCC;
}

